<template>
  <div>
    <div class="title">
      <div>
     <router-link to="/index" style="color: white"> <a-icon type="left" />
       <span>返回</span>
     </router-link>
      </div>
      <div>
        <a-icon type="star" v-if="like" @click="changeCollect" class="star"/>
        <van-icon name="star" color="red"  @click="changeCollect" v-else class="star" />
      </div>
    </div>
    <div class="article">
      <h3>{{ this.list.title}}</h3>
      <div v-html="list.content" class="text"></div>
    </div>
    <div class="foot">
      <van-icon name="good-job-o" color="#fff" @click="isLike" style="margin-top: 10px" v-if="zan">
      </van-icon>
      <van-icon name="good-job" color="#ff0000" @click="Like" style="margin-top: 10px" v-else>
<!--        <span>{{list.zan}}</span>-->
      </van-icon>
      <div>
        <p><span>阅读量</span><span>{{list.readNum}}</span></p>
        <p><span>点赞数</span><span>{{list.zan}}</span></p>
      </div>
    </div>
  </div>
</template>

<script>
import {article,getCollect,getCollectList,addSee,getZan} from "@/api/api";

export default {
  name: "newsDetail",
  data(){
    return{
      like:true,
      list:{},
      zan:true
    }
  },
  methods:{
    changeCollect(){
      if(this.$store.state.islogin){
        if(!this.like){
          this.$dialog.confirm({
            title:'提示',
            message:'您真的确定要取消收藏吗'
          }).then(()=>{
            getCollect(this.$route.query.articleId).then(res => {
              console.log(res)
              this.like = !this.like
            })
          }).catch(() => {
            // on cancel
          })
        }else{
          getCollect(this.$route.query.articleId).then(res=>{
            console.log(res)
            this.$toast('收藏成功')
            this.like = !this.like
          })
        }
      } else {
        this.flag == this.flag;
        // this.$toast("请先登录")
        this.$dialog.confirm({
          title: '您未处于登录状态',
          message: '是否去登录',
        }).then(() => {
          this.$router.push("/login")
        }).catch(() => {
              // on cancel
        });
      }
    },
    isLike() {
      if (this.$store.state.islogin) {
        getZan(this.$route.query.articleId).then(res => {
          this.$toast(res.msg);
          this.zan = false;
          article(this.$route.query.articleId).then(res => {
            // console.log(res)
            this.list = res.data
          })
        })
      } else {
        this.$dialog.confirm({
          title: '您未处于登录状态',
          message: '是否去登录',
        })
            .then(() => {
              this.$router.push("/login")
            })
            .catch(() => {
              // on cancel
            });
      }
    },
    Like() {
      this.$toast("已点赞");
    }
  },
  created() {
    getCollectList().then(res => {

      if (res.rows.some(item => item.articleId == this.$route.query.articleId)) {
        this.like = false;
      }
    });
    addSee(this.$route.query.articleId).then(res => {
      console.log(res);
      article(this.$route.query.articleId).then(res=>{
        console.log(res)
        this.list = res.data
      })
    })

  }
}
</script>

<style scoped lang="less">
*{
  padding: 0;
  margin: 0;
}
.title{
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 30px;
  background: #00aaff;
  color: white;
  padding: 5px 10px;
  div{
    .star{
      font-size: 20px;
      margin: 6px 10px;
    }
  }
}
.article{
  padding: 20px;
  box-sizing: border-box;
  height: calc(100vh - 80px);
  overflow: auto;
  h3{
    font-weight: bolder;
  }
  .text{
    width: 100%;
    text-align: center;
    /deep/img{
      width: 50%;
    }
  }
}
.foot{
  height: 40px;
  padding: 5px 10px;
  line-height: 30px;
  background: #00aaff;
  display: flex;
  justify-content: space-between;
  div{
    display: flex;
    p{
      margin-left: 10px;
    }
  }

}
</style>